<template>
  <div class="mainDiv flexDiv flexItem">
    
      <div class="thrHead workHead">
        &nbsp;Properties
        <mu-flat-button label="保存" class="thrhBtn" primary :disabled="!editObjIschanged" @click="saveInfo" />
        <i class="lhBtn icon-zhankai"></i>
      </div>
      <mu-flexbox-item class="thrContent flexDiv">
        <!-- <div style="height:100%;overflow:hidden"> -->
          <mu-flexbox class="netWork treeLine treeTitle flexNoneItem" :gutter="0" justify="flex-start">
            <span class="arrow">></span>
            <mu-flexbox-item class="title">{{editObj.info[editObj.type+'name']}}</mu-flexbox-item>
          </mu-flexbox>
          <!-- <div class="thrEditDiv"> -->
            <div v-for="(editItem,editkey) in editObj.info.layerdata">
              <rightitem :itemkey="editkey" :itemval="editItem" @rightValChange="rightValChangeEvent"></rightitem>
            </div>
      </mu-flexbox-item>
      <mu-dialog :open="leaveConfirmLayer" title="您编辑的信息还未保存，立即保存？" @close="leaveConfirmLayer=false">
        <mu-flat-button slot="actions" @click="leaveConfirmLayer=false" primary label="取消"/>
        <mu-flat-button slot="actions" primary @click="saveInfo" label="保存"/>
      </mu-dialog>
  </div>
</template>

<script>
import rightitem from './rightitem'
export default {
  name: 'rightEditArea',
  components: {
      rightitem
  },
  props:['editObj'],
  data () {
    return {
      isEdit:false,
      oldEditObjStr:'{"type":"","info":{}}', //首次载入时设为基准 作为与editObj比较
      isEditTouched : false,
      defaultObj : '{"type":"","info":{}}',       //当没有数据载入进本组件 editObjd的json字符串应该==这个
      leaveConfirmLayer:false
    }
  },
  methods:{
    valueClick () {
      this.isEdit = true;
    },
    rightValChangeEvent (arr) {
      this.isEditTouched = true;
      var keyName = arr[0];
      var val = arr[1];
      var thisdata = this.editObj.type+"data";
      this.editObj.info[thisdata][keyName] = val;
      //console.log(this.editObj.info[thisdata][keyName]);
    },
    saveInfo () {
      if (localStorage.nmb_token && localStorage.nmb_token!="") {
        var infoJson = JSON.stringify(this.editObj.info.layerdata);
        console.log(infoJson);
        this.$http.post(this.$root.baseUrl+'api.php/Index/nimiUpdateLayer/token/'+localStorage.nmb_token,{
          layerid:this.editObj.info[this.editObj.type+"id"],
          layername:this.editObj.info[this.editObj.type+"name"],
          layerinfo:infoJson
        },{emulateJSON:true}).then((response) => {
            this.isLayerDeling = false;
            this.$root.showToast(response.body.msg);
            if (response.body.error == 0) {
                this.$root.$refs.child.loadProjectList();
                this.oldEditObjStr = JSON.stringify(this.editObj);
            }
            this.leaveConfirmLayer = false;
        }, (response) => {
            this.isLayerDeling = false;
            this.$root.showToast("保存失败");
            this.leaveConfirmLayer = false;
        });
      }
      else{
        this.$root.gotoLogin();
      }
    }
  },
  mounted () {
    var self = this;
    this.$root.eventHub.$on('rightEditValChange', function (arr) {
      //console.log(arr);
      var keyName = arr[0];
      var val = arr[1];
      self.editObj.info[keyName] = val;
    })
  },
  computed : {
    isFloder () {
      return typeof this.itemval === 'object';
    },
    editObjIschanged () {
      //console.log(JSON.stringify(this.editObj),this.oldEditObjStr);
      var str = JSON.stringify(this.editObj);
      return (str != this.oldEditObjStr) && (this.defaultObj != JSON.stringify(this.editObj));
    }
  }
}
</script>

<style scoped lang="less">
.mainDiv{
  width: 100%;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.thrHead{
  background-color: #000;
  width:100%;
  height: 30px;
  line-height: 30px;
  color:#fff;
  margin:0;
  .thrhBtn{
    height: 20px;
    line-height: 20px;
    min-width: 40px;
  }
  .lhBtn{
    width:20px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    float: right;
    &.icon-zhankai{
      margin:0 7px 0 0;
    }
  }
  &.workHead{
    background: none;
    color:#000;
  }
}
.thrContent{
  width: 100%!important;
  background-color: #fff;
  padding:10px 5px;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  overflow-y: scroll;
  .treeLine{
    .title{
      margin:0 0 0 3px!important;
    }
  }
  .thrEditDiv{
    overflow: hidden;
    overflow-y: scroll;
  }
}
</style>